import React from 'react'
import { Row, Col } from "antd"
import './index.less'
import Util from '../../utils/utils'
import axios from '../../axios'
import { connect } from 'react-redux'
import { axhttp } from '../../utils/axhttp'

class Header extends React.Component {
    state = {}
    componentWillMount() {
        /** 获取缓存的用户登录信息（json） */
        const user = localStorage.getItem('login_user_info');
        /** 获取登录的用户信息（对象） */
        let userObj = {};
        if (user) {
            userObj = JSON.parse(user);
        }
        this.setState({
            user: userObj,
        })
        setInterval(() => {
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        }, 1000)
        this.getWeatherAPIData();
    }

    getWeatherAPIData() {
        let city = '北京';
        axios.jsonp({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then((res) => {
            if (res.status == 'success') {
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl: data.dayPictureUrl,
                    weather: data.weather
                })
            }
        })
    }

    handleLogout(e) {
        if (e) {
            /** 阻止默认事件 */
            e.preventDefault();
        }
        /** 清空登录状态 */
        localStorage.setItem('is_login_timestamp', 0);
        /** 验证登录状态，重新登陆 */
        axhttp.checkIsLogin();
    }

    render() {
        const { menuName, menuType } = this.props;
        return (
            <div className="header">
                <Row className="header-top" style={{ boxShadow: '0 1px 4px rgb(0 21 41 / 8%)' }}>
                    {
                        menuType ?
                            <Col span="6" className="logo">
                                <img src="/assets/logo-ant.svg" alt="" />
                                <span>共享单车管理系统后台管理系统</span>
                            </Col> : ''
                    }
                    <Col span={menuType ? 18 : 24}>
                        <span>欢迎您，{this.state.user.username}</span>
                        <a onClick={this.handleLogout} style={{ marginLeft: 10 }}>退出</a>
                    </Col>
                </Row>
                {
                    menuType ? '' : <div style={{ padding: '12px 20px' }}>{menuName || '首页'}</div>
                }
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        menuName: state.menuName
    }
};
export default connect(mapStateToProps)(Header)

export class LoginHeader extends React.Component {
    render() {
        return (
            <div className="login-header">
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="欢迎登录共享单车管理系统后台管理系统" />
                    欢迎登录共享单车管理系统后台管理系统
                </div>
            </div>
        );
    }
}